<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论页面</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $.ajax({
                type: "get",
                url: "/selectAll",
                dataType: "json",
                success: function(data) {
                    var tr="";
                    console.log(data);
                    $.each(data, function(index, comment) {
                        tr +="<div class='box'><p><div class='img'>帅</div><span style='margin-right: 10px;margin-left: 24px'>"+comment.nickname+"</span>"+comment.createdatetime+"</p>"+
                                "<p>"+comment.content+"</p>"+"<p><div><a><button id='reply' value='"+comment.parentid+"'>回复</button></a><ul id='selects'></ul></div><span class='right'><a href='likenumThumbup?id="+comment.id+"'><button class='like'>点赞</button></a>("+comment.likenum+")</span><span><button value='"+comment.id+"' id='del'>删除</button></span></p></div>";
                    });
                    $('#top').html(tr);
                }
            });

            $("#but").click(function () {
                $.ajax({
                    type: "post",
                    url: "/saveComment",
                    data:{
                      content:$("#content").val()
                    },
                    dataType: "json",
                    success: function(data){
                        if(data==1){
                            alert("成功添加！");
                        }
                    }
                });
            })

            $("#top").on("click","#del",function () {
                var ss = $(this).val();
                alert("删除的值："+ss);
                $.ajax({
                    type: "delete",
                    url: "/deleteComment",
                    data:{
                        id:$(this).val()
                    },
                    dataType: "json",
                    success: function(data){
                        if(data==true){
                            alert("删除成功！");
                        }
                    }
                });
            })

            $("#top").on("click","#reply",function () {
                var ss = $(this).val();
                alert("删除的值："+ss);
                $.ajax({
                    type: "get",
                    url: "/selectAllCommentId",
                    data:{
                        parentid:$(this).val()
                    },
                    dataType: "json",
                    success: function(data){
                        var tr="";
                        $.each(data, function(index, comment) {
                            tr +="<div class='box'><p><div class='img'>帅</div><span style='margin-right: 10px;margin-left: 24px'>"+comment.nickname+"</span>"+comment.createdatetime+"</p>"+
                                "<p>"+comment.content+"</p>"+"<p><div><a><button id='reply' value='"+comment.parentid+"'>回复</button></a></div><span class='right'><a href='likenumThumbup?id="+comment.id+"'><button class='like'>点赞</button></a>("+comment.likenum+")</span><span><button value='"+comment.id+"' id='del'>删除</button></span></p></div>";
                        });
                        $('#selects').html(tr);
                    }
                });
            })
        });
    </script>
    <style>
        .box{
            border-bottom:1px gray solid;
            padding-bottom: 10px;

        }
        .img{
            border-radius: 6px;
            width: 20px;
            border: 1px gray solid;
            height: 20px;
            position: relative;
            top:24px;
        }

        .right{
            float: right;
        }

        .input{
            width: 300px;
            height: 40px;
            line-height: 40px;
        }
        #but{
            width: 80px;
            height: 40px;
            background-color: blue;

        }

        #del{
            background-color: red;
            border-radius: 6px;
        }

        .like{
            background-color: blue;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div style="border: 1px red solid;margin: auto;width: 600px">
        <!--    <div>-->
        <!--        <h2 th:text="${article}"></h2>-->
        <!--        <p th:text="${articleid}" id="articleid"></p>-->
        <!--    </div>-->
        <div class="bigBox">
            <p>
                <input type="text" name="content" class="input" id="content">
                <button id="but">提交</button>
            </p>
        </div>
        <div id="top">

        </div>

    </div>
</body>
</html>